<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>

<body>

  <!-- 
    深度监视：
        (1).Vue中酌watch默认不监测对象内部值的改变(一层) 。
        (2).配置deep：true可以监测对象内部值改变(多层)。
    备注：
        (1).Vue自身可以监测对象内部值的改变， 但Vue提供的watch默认不可以!
        (2).使用watch时根据数据的具体结构， 决定是否采用深度监视。
   -->

  <div id="root">
    <h2>今天天气很{{weather}}</h2>
    <button @click='changeWeather'>切换天气</button>

    <hr>

    <h3>a的值是{{numbers.a}}</h3>
    <button @click="numbers.a++">a+1</button>

    <h3>b的值是{{numbers.b}}</h3>
    <button @click="numbers.b++">b+1</button>

  </div>

  <script>
    Vue.config.productionTip = false

    const vm = new Vue({
      el: '#root',
      data: {
        isHot: true,
        numbers: {
          a: 1,
          b: 1
        }
      },
      methods: {
        changeWeather() {
          this.isHot = !this.isHot
        }
      },
      computed: {
        weather() {
          return this.isHot ? '炎热' : '凉爽'
        }
      },
      watch: {
        isHot: {
          // immediate: true, // true：初始化时让handler调用一下
          handler(newValue, oldValue) {
            console.log('isHot被修改了', oldValue, '改成了', newValue)
          }
        },
        // 'numbers.a': {
        //   handler() {
        //     console.log('a++')
        //   }
        // }
        // 监视多级结构中所有属性的变化
        numbers: {
          deep: true,
          handler() {
            console.log('numbers changed')
          }
        }
      }
    })
  </script>
</body>

</html>